import React, { useState } from "react";
import {
  Button,
  Dropdown,
  Menu,
  Space,
  Avatar,
  Modal,
  Form,
  Input,
} from "antd";
import { setCookie, getLang } from "@/utils/index";
import MainMenu from "@/components/MainMenu";
import {
  GlobalOutlined,
  ShoppingCartOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { NavLink, useLocation, useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import styles from "./index.module.scss";
const transLanguage = (lkey: any) => {
  let dl = "简体中文";
  switch (lkey) {
    case "zh":
      dl = "简体中文";
      break;
    case "en":
      dl = "English";
      break;
  }
  return dl;
};
const handleChangeLang = (key: any) => {
  setCookie("language", key, 31536000);
  setTimeout(() => {
    location.reload();
  }, 500);
};
export default function CusHeader() {
  // 切换语言
  const [language]: any = useState(getLang());
  const currentRoute = useLocation();
  const navigateto = useNavigate();
  const { t } = useTranslation();
  // 登录
  const [isModalOpen, setIsModalOpen] = useState(false);

  const menuClick = (e: { key: string }) => {
    // 点击跳转到对应路由  编程式导航跳转 利用到一个hook
    navigateto(e.key);
  };
  const handleOk = (values: any) => {
    console.log(values);
    // login({ email: values.email, password: values.password }).then(
    // (res: any) => {
    // console.log(res);
    // if (res.code === 200) {
    localStorage.setItem("GY1", JSON.stringify("awd"));
    location.href = "/";
    // } else {
    // message.error(res.msg);
    // }
    // };
    // );
    setIsModalOpen(false);
  };

  const items: any = [
    {
      key: "1",
      label: (
        <div
          onClick={() => {
            handleChangeLang("en");
          }}
        >
          English
        </div>
      ),
    },
    {
      key: "2",
      label: (
        <div
          onClick={() => {
            handleChangeLang("zh");
          }}
        >
          简体中文
        </div>
      ),
    },
  ]; // 用户
  const items2: any = [
    {
      label: (
        <Avatar
          style={{ backgroundColor: "#87d068" }}
          icon={<UserOutlined />}
        />
      ),
      children: [
        {
          label: t("My Order"),
          key: "/myOrder",
        },
        {
          label: "Personal Center",
          key: "/personalCenter",
        },
        {
          label: (
            <a
              style={{ color: "red" }}
              onClick={() => {
                localStorage.removeItem("GY1");
                location.href = "/";
              }}
            >
              Quit
            </a>
          ),
          key: "/",
        },
      ],
    },
  ];
  // 是否登录
  const isLogin = localStorage.getItem("GY1");
  return (
    <div className={styles.header}>
      <div className={styles.headerTop}>
        <Space>
          <div
            style={{
              marginRight: 10,
            }}
          >
            <Dropdown menu={{ items }} trigger={["click"]}>
              <a style={{ color: "#fff" }}>
                <Space>
                  <GlobalOutlined />
                  {transLanguage(language)}
                </Space>
              </a>
            </Dropdown>
          </div>
          <div className={styles.login}>
            {isLogin ? (
              <div style={{ display: "flex", marginLeft: "30px" }}>
                <NavLink
                  to={"shoppingCart"}
                  style={{
                    fontSize: "20px",
                    display: "flex",
                    alignItems: "center",
                  }}
                >
                  <ShoppingCartOutlined />
                </NavLink>
                <Menu
                  style={{
                    marginLeft: "10px",
                  }}
                  defaultSelectedKeys={[currentRoute.pathname]}
                  selectedKeys={[currentRoute.pathname]}
                  mode="horizontal"
                  items={items2}
                  onClick={menuClick}
                />
              </div>
            ) : (
              <div
                className={styles.nologin}
                onClick={() => {
                  setIsModalOpen(true);
                }}
              >
                <Space>
                  <UserOutlined />
                  <span>Login</span>
                </Space>
              </div>
            )}
          </div>
        </Space>
      </div>
      <div className={styles.headerBottom}>
        <div
          style={{
            fontSize: "28px",
            fontWeight: "bold",
            color: "#aaaaaa",
          }}
        >
          LOGO
        </div>
        <MainMenu />
      </div>

      <Modal
        title="Login"
        open={isModalOpen}
        onCancel={() => {
          setIsModalOpen(false);
        }}
        footer={false}
      >
        <Form
          name="normal_login"
          onFinish={handleOk}
          layout="vertical"
          style={{ width: "85%", margin: "50px auto" }}
        >
          <Form.Item
            label="Account"
            name="email"
            rules={[{ required: true, message: "Please input your Email!" }]}
          >
            <Input placeholder="Place enter email" />
          </Form.Item>
          <Form.Item
            label="Password"
            name="password"
            rules={[{ required: true, message: "Please input your Password!" }]}
          >
            <Input type="password" placeholder="Place enter password" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" style={{ width: "100%" }}>
              Log in
            </Button>
          </Form.Item>
          <Form.Item>
            <div style={{ display: "flex", justifyContent: "space-between" }}>
              <NavLink to={""}>Forgot password</NavLink>
              <NavLink
                to={"register"}
                onClick={() => {
                  setIsModalOpen(false);
                }}
              >
                register now!
              </NavLink>
            </div>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}
